<template>
  <div class="header-info">
    <div class="list-item-setting" v-if="true">
      <div class="title-info">
        <el-divider content-position="left">高度设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['areaHeight']"
        />
      </el-form-item>

      <template v-if="optionsInfo['replenishArea']">
        <div class="title-info">
          <el-divider content-position="left">补充说明设置</el-divider>
        </div>
        <template v-if="optionsInfo['replenishArea']">
          <el-form-item class="replenish-shown" label="补充说明显示">
            <el-switch v-model="optionsInfo.replenishShown"/>
          </el-form-item>
          <el-form-item class="replenish-shown" label="补充说明内容" v-if="(optionsInfo.replenishShown)">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="optionsInfo.replenishContent"
                      placeholder="请输入内容" size="small"/>
          </el-form-item>
        </template>
      </template>

      <template v-if="optionsInfo['roomNumberArea']">
        <div class="title-info">
          <el-divider content-position="left">诊室号设置</el-divider>
        </div>
        <el-form-item label="序号显示" v-if="optionsInfo['roomNumberISControl']">
          <el-switch v-model="optionsInfo['roomNumberShown']"/>
        </el-form-item>
        <template v-if="optionsInfo['roomNumberShown']">
          <el-form-item label="手动设置诊室号" class="replenish-shown">
            <el-switch v-model="optionsInfo['roomNumberAuto']"/>
          </el-form-item>
          <template v-if="optionsInfo['roomNumberAuto']">
            <el-form-item class="replenish-shown" label="序号">
              <el-input-number
                  :min="1"
                  :max="499"
                  size="small"
                  v-model="optionsInfo['roomNumber']"
              />
            </el-form-item>
          </template>
          <el-form-item class="replenish-shown" label="序号字号">
            <el-input-number
                :min="1"
                size="small"
                v-model="optionsInfo['roomNumberFontSize']"
            />
          </el-form-item>
        </template>
      </template>

      <template v-if="optionsInfo['roomNameArea']">
        <div class="title-info">
          <el-divider content-position="left">诊室设置</el-divider>
        </div>
        <template v-if="optionsInfo['roomNameShown']">
          <el-form-item label="手动设置诊室名" class="replenish-shown">
            <el-switch v-model="optionsInfo['roomNameAuto']"/>
          </el-form-item>
          <template v-if="optionsInfo['roomNameAuto']">
            <el-form-item class="replenish-shown" label="诊室名称">
              <el-input v-model="optionsInfo['roomName']" placeholder="请输入内容" size="small"/>
            </el-form-item>
          </template>

          <el-form-item class="replenish-shown" label="诊室名称字体">
            <el-input-number
                :min="1"
                size="small"
                v-model="optionsInfo['roomNameFontSize']"
            />
          </el-form-item>
        </template>
      </template>

      <template v-if="optionsInfo['currentPatientArea']">
        <div class="title-info">
          <el-divider content-position="left">正在就诊标题</el-divider>
        </div>
        <el-form-item class="replenish-shown" label="正在就诊标题字号">
          <el-input-number
              :min="1"
              size="small"
              v-model="optionsInfo['currentPatientTitleFontSize']"
          />
        </el-form-item>
        <el-form-item label="正在就诊标题颜色" class="replenish-shown">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['currentPatientTitleColor']"/>
        </el-form-item>
      </template>

      <template v-if="optionsInfo['currentPatientArea']">
        <div class="title-info">
          <el-divider content-position="left">正在就诊内容</el-divider>
        </div>
        <el-form-item class="replenish-shown" label="正在就诊内容字号">
          <el-input-number
              :min="1"
              size="small"
              v-model="optionsInfo['currentPatientConnectFontSize']"
          />
        </el-form-item>
        <el-form-item label="正在就诊内容颜色" class="replenish-shown">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['currentPatientConnectColor']"/>
        </el-form-item>

        <el-form-item label="正在就诊内容换行" class="replenish-shown">
          <el-switch v-model="optionsInfo['currentPatientConnectWrap']"/>
        </el-form-item>
      </template>

      <template v-if="optionsInfo['patientListArea']">
        <div class="title-info">
          <el-divider content-position="left">待诊标题设置</el-divider>
        </div>
        <el-form-item label="标题内容" class="replenish-shown">
          <el-input v-model="optionsInfo['patientListTitle']"
                    placeholder="请输入内容" size="small"/>
        </el-form-item>
        <el-form-item label="字体大小" class="replenish-shown">
          <el-input-number
              :min="0"
              size="small"
              v-model="optionsInfo['patientListTitleFontSize']"
          />
        </el-form-item>
        <el-form-item label="粗细设置" class="replenish-shown">
          <el-select v-model="optionsInfo['patientListTitletFontWeight']" placeholder="请选择">
            <el-option
                v-for="item in fontWeightOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['patientListTitleFontColor']"/>
        </el-form-item>
<!--        <el-form-item label="背景颜色">-->
<!--          <el-color-picker-->
<!--              size="small"-->
<!--              show-alpha-->
<!--              :predefine="predefineColors"-->
<!--              v-model="optionsInfo['patientListTitleBackground']"/>-->
<!--        </el-form-item>-->
        <el-form-item label="背景颜色">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['patientListTitleBackground2']"/>
        </el-form-item>
        <div class="title-info">
          <el-divider content-position="left">待诊列表设置</el-divider>
        </div>

        <el-form-item label="列表行" class="replenish-shown">
          <el-input-number
              size="small"
              :min="4"
              :max="5"
              @change="patientListTotal"
              v-model="optionsInfo['patientListRow']"
          />
        </el-form-item>
        <el-form-item label="列表列" class="replenish-shown">
          <el-input-number
              :min="4"
              :max="5"
              size="small"
              @change="patientListTotal"
              v-model="optionsInfo['patientListCol']"
          />
        </el-form-item>


        <!--切屏状态-->
        <el-form-item label="切屏状态" class="replenish-shown">
          <el-switch v-model="optionsInfo['switchState']"/>
        </el-form-item>
        <!--切屏等待时间-->
        <el-form-item label="切屏等待时间(s)" class="replenish-shown" v-if="optionsInfo['switchState']">
          <el-input-number
              :min="5"
              size="small"
              v-model="optionsInfo['switchTime']"
          />
        </el-form-item>



        <el-form-item label="接口状态" class="replenish-shown">
          <el-switch v-model="optionsInfo['ApiState']"/>
        </el-form-item>
        <template v-if="optionsInfo['ApiState']">
          <el-form-item label="接口类型" class="replenish-shown">
            <el-select v-model="optionsInfo['ApiType']" placeholder="请选择" size="small">
              <el-option
                  v-for="item in ApiTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="接口地址" class="replenish-shown" v-if="optionsInfo['ApiType']===1">
            <el-input
                v-model="optionsInfo['ApiAddress']"
                size="small"
                placeholder="请输入内容"
            />
          </el-form-item>
          <el-form-item
              label="接口标识"
              v-if="optionsInfo['ApiType']===2"
              class="replenish-shown"
          >
            <el-input
                v-model="optionsInfo['ApiSign']"
                size="small"
                placeholder="请输入内容"
            />
          </el-form-item>
          <!--接口请求频次-->
          <el-form-item label="接口请求频次(s)" class="replenish-shown">
            <el-input-number
                :min="5"
                size="small"
                v-model="optionsInfo['frequencyApi']"
            />
          </el-form-item>
        </template>


        <el-form-item label="患者号显示" v-if="false">
          <el-switch v-model="optionsInfo['patientOrderNoShown']"/>
        </el-form-item>

        <template v-if="optionsInfo['patientOrderNoShown']">
          <el-form-item label="字体颜色">
            <el-color-picker
                size="small"
                show-alpha
                :predefine="predefineColors"
                v-model="optionsInfo['patientOrderFontColor']"/>
          </el-form-item>
          <el-form-item label="背景颜色">
            <el-color-picker
                size="small"
                show-alpha
                :predefine="predefineColors"
                v-model="optionsInfo['patientOrderBackground']"/>
          </el-form-item>
        </template>

      </template>
    </div>
  </div>
</template>

<script>
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "windowPatientListInfoConfig-editor",
  componentName: "windowPatientListInfoConfig-editor",
  mixins: [],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      optionsInfo: Object(),
      predefineColors: types['predefineColors'],
      fontWeightOptions: [
        {
          value: 'lighter',
          label: '细体'
        },
        {
          value: 'normal',
          label: '正常'
        },
        {
          value: '500',
          label: '粗体'
        },
        {
          value: 'bold',
          label: '极粗'
        },
      ],
      ApiTypeOptions: [
        {
          value: 1,
          label: '接口地址'
        },
        {
          value: 2,
          label: '接口标识'
        }
      ],
    }
  },

  computed: {},

  methods: {
    patientListTotal() {
      let {patientListRow, patientListCol} = this.optionsInfo;
      Reflect.set((this.optionsInfo), 'patientListTotal', (patientListRow * patientListCol));
    }
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true
    }
  }

}
</script>


<style lang="scss" scoped>
.replenish-shown {
  display: flex;
  flex-direction: column;

  :deep(label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
}
</style>